<template>
    <view class="irrigation-container">
        <!-- 使用封装的页面头部组件 -->
        <page-header title="智能灌溉"></page-header>

        <view class="tabs-container">
            <view
                class="tab"
                :class="{ active: currentMode === 'irrigation' }"
                @click="switchMode('irrigation')">
                <text class="tab-text">智能灌溉</text>
            </view>
            <view
                class="tab"
                :class="{ active: currentMode === 'drainage' }"
                @click="switchMode('drainage')">
                <text class="tab-text">智能排水</text>
            </view>
        </view>

        <!-- 地块选择 -->
        <view class="land-selector-container">
            <view class="section-title">选择地块</view>
            <view class="land-grid">
                <view
                    class="land-item"
                    v-for="block in lands"
                    :key="block.id"
                    :class="{ active: selectedBlock === block.id }"
                    @click="selectBlock(block.id)">
                    <image src="/static/images/cao.png" mode="aspectFill"></image>
                    <text>{{ block.parcelName }}</text>
                </view>
            </view>
        </view>

        <!-- 地块详细控制 -->
        <view class="block-detail" v-if="selectedBlock">
            <view class="section-title">水阀控制</view>
            <view class="block-header">
                <view class="mode-switch">
                    <text
                        class="mode-option"
                        :class="{ active: getBlockById(selectedBlock).allOn }"
                        @click="showConfirmDialog(selectedBlock, 'all')">
                        阀门全开
                    </text>
                    <text
                        class="mode-option"
                        :class="{ active: !getBlockById(selectedBlock).allOn }"
                        @click="showConfirmDialog(selectedBlock, 'all')">
                        阀门全关
                    </text>
                </view>
            </view>

            <!-- 区域控制列表 -->
            <view class="area-list">
                <view class="area-item" v-for="area in getBlockAreas(selectedBlock)" :key="area.id">
                    <!-- 区域标题和控制 -->
                    <view class="area-header">
                        <view class="area-info" @click="toggleAreaExpand(selectedBlock, area.id)">
                            <text class="expand-icon" :class="{ expanded: area.expanded }">▶</text>
                            <text class="area-name">{{ area.name }}{{ getModeText() }}状态</text>
                        </view>
                        <view
                            class="area-control"
                            @click="toggleAreaStatus(selectedBlock, area.id)">
                            <text class="status-text">{{ area.on ? '已开启' : '已关闭' }}</text>
                            <view class="switch-container">
                                <ProgressBar
                                    v-if="
                                        getProgressState(selectedBlock, area.id, 'area').isAnimating
                                    "
                                    :auto-start="true"
                                    :is-opening="
                                        getProgressState(selectedBlock, area.id, 'area').isOpening
                                    "
                                    :duration="getProgressState(selectedBlock, area.id, 'area').duration || 2000"
                                    @complete="
                                        onProgressComplete(selectedBlock, area.id, 'area')
                                    " />
                                <view
                                    v-else
                                    class="switch-container"
                                    :class="{ 'switch-on': area.on }">
                                    <view class="switch-button"></view>
                                </view>
                            </view>
                            <text class="action-text">{{ getAreaButtonText(selectedBlock, area.id) }}</text>
                        </view>
                    </view>

                    <!-- 子地块列表 -->
                    <view class="sub-blocks" v-if="area.expanded">
                        <view
                            class="sub-block-item"
                            v-for="subBlock in getAreaSubBlocks(selectedBlock, area.id)"
                            :key="subBlock.id"
                            @click="toggleSubBlockStatus(selectedBlock, subBlock.id)">
                            <view class="sub-block-info">
                                <view
                                    class="status-indicator"
                                    :class="{ active: subBlock.on }"></view>
                                <text class="sub-block-name">
                                    {{ subBlock.name }}{{ getModeText() }}状态
                                </text>
                            </view>
                            <view class="sub-block-control">
                                <text class="status-text">
                                    {{ subBlock.on ? '已开启' : '已关闭' }}
                                </text>
                                <view class="switch-container">
                                    <ProgressBar
                                        v-if="
                                            getProgressState(selectedBlock, subBlock.id, 'sub')
                                                .isAnimating
                                        "
                                        :auto-start="true"
                                        :is-opening="
                                            getProgressState(selectedBlock, subBlock.id, 'sub')
                                                .isOpening
                                        "
                                        :duration="getProgressState(selectedBlock, subBlock.id, 'sub').duration || 2000"
                                        @complete="
                                            onProgressComplete(selectedBlock, subBlock.id, 'sub')
                                        " />
                                    <view
                                        v-else
                                        class="switch-container"
                                        :class="{ 'switch-on': subBlock.on }">
                                        <view class="switch-button"></view>
                                    </view>
                                </view>
                                <text class="action-text">{{ getSubBlockButtonText(selectedBlock, subBlock.id) }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 百分比选择弹窗 -->
        <PercentageDialog
            :visible="percentageDialogVisible"
            :title="percentageDialogTitle"
            :percentage-options="currentPercentageOptions"
            :default-percentage="defaultPercentage"
            @confirm="handlePercentageConfirm"
            @cancel="handlePercentageCancel" />
    </view>
</template>

<script>
import PageHeader from '@/components/PageHeader/index.vue'
import ProgressBar from '@/components/ProgressBar/index.vue'
import PercentageDialog from '@/components/PercentageDialog/index.vue'
import { valve, land } from '@/utils/api/index.js'
export default {
    components: {
        PageHeader,
        ProgressBar,
        PercentageDialog,
    },
    data() {
        return {
            currentMode: 'irrigation', // irrigation 或 drainage
            selectedBlock: null,
            hasWaterAlert: true,
            lands: [],
            // 动态数据结构
            valveData: {
                irrigation: [], // 灌溉数据
                drainage: [], // 排水数据
            },
            // 进度条状态管理
            progressStates: {
                // 格式: 'blockId-areaId' 或 'blockId-subBlockId'
                // 值: { isAnimating: boolean, isOpening: boolean }
            },
            // 百分比弹窗相关数据
            percentageDialogVisible: false,
            percentageDialogTitle: '',
            currentPercentageOptions: [], // 当前显示的百分比选项
            percentageOptions: [
                { value: 10, label: '10%' },
                { value: 20, label: '20%' },
                { value: 30, label: '30%' },
                { value: 40, label: '40%' },
                { value: 50, label: '50%' },
                { value: 60, label: '60%' },
                { value: 70, label: '70%' },
                { value: 80, label: '80%' },
                { value: 90, label: '90%' },
                { value: 100, label: '100%' }
            ], // 区域总状态选项
            subPercentageOptions: [
                { value: 25, label: '25%' },
                { value: 50, label: '50%' },
                { value: 75, label: '75%' },
                { value: 100, label: '100%' }
            ], // 子状态选项
            defaultPercentage: 100,
            pendingPercentageAction: null, // 待处理的百分比操作
        }
    },
    onShow() {
        this.fetchParcels()
    },
    methods: {
        /**
         * 获得地块数据
         */
        async fetchParcels() {
            uni.showLoading({ title: '加载地块数据...' })
            const res = await land.getAllParcelAndFields()

            if (res.code === 0 && res.data && res.data.length > 0) {
                // 格式化API返回的数据为组件所需的格式
                this.lands = res.data
                this.selectedBlock = this.lands[0].id
                // 加载选中地块的阀门数据
                this.fetchList()
            } else {
                // 使用默认数据作为备选
                this.initDefaultData()
            }
            uni.hideLoading()
        },
        /**
         * 获得水阀数据
         */
        async fetchList() {
            if (!this.selectedBlock) return

            uni.showLoading({ title: '加载阀门数据...' })
            // type 0:总进 1：总排
            // parcelId 地块名称
            const res = await valve.getValveParcelList({
                parcelId: this.selectedBlock,
                type: this.currentMode === 'irrigation' ? 0 : 1,
            })

            if (res.code === 0 && res.data) {
                // 处理API返回的数据为组件所需的格式
                this.processValveData(res.data)
            }
            uni.hideLoading()
        },

        /**
         * 处理阀门数据为组件所需格式
         */
        processValveData(data) {
            // 清空当前模式的数据
            this.valveData[this.currentMode] = []

            if (!data || data.length === 0) return

            // 将API返回的数据转换为组件需要的格式
            const formattedData = {
                id: this.selectedBlock,
                name: this.getSelectedBlockName(),
                allOn: data.every((item) => item.switchStatusType === '1'),
                areas: data.map((item) => {
                    return {
                        id: item.id,
                        iemi: item.iemi,
                        name: item.valveName,
                        on: item.switchStatusType === '1',
                        expanded: true,
                        valveType: 'main', // 标记为主阀门
                        subBlocks: item.subValveList
                            ? item.subValveList.map((subItem) => {
                                  return {
                                      id: subItem.id,
                                      iemi: subItem.iemi,
                                      name: subItem.valveName,
                                      on: subItem.switchStatusType === '1',
                                      valveType: 'sub', // 标记为子阀门
                                  }
                              })
                            : [],
                    }
                }),
            }

            // 更新当前模式的数据
            this.valveData[this.currentMode] = [formattedData]
        },

        /**
         * 获取选中地块名称
         */
        getSelectedBlockName() {
            const block = this.lands.find((item) => item.id === this.selectedBlock)
            return block ? block.parcelName : '未知地块'
        },

        goBack() {
            uni.navigateBack()
        },

        switchMode(mode) {
            this.currentMode = mode
            this.fetchList()
        },

        selectBlock(blockId) {
            this.selectedBlock = blockId
            this.fetchList()
        },

        getBlockById(blockId) {
            return this.valveData[this.currentMode].find((block) => block.id === blockId) || {}
        },

        getBlockAreas(blockId) {
            const block = this.getBlockById(blockId)
            return block.areas || []
        },

        getAreaSubBlocks(blockId, areaId) {
            const block = this.getBlockById(blockId)
            const area = block.areas?.find((a) => a.id === areaId)
            return area ? area.subBlocks : []
        },

        getModeText() {
            return this.currentMode === 'irrigation' ? '灌溉' : '排水'
        },

        // 切换地块总状态
        toggleBlockStatus(blockId) {
            const block = this.getBlockById(blockId)
            if (!block) return

            const newStatus = !block.allOn
            block.allOn = newStatus

            // 同步更新所有区域和子地块状态
            if (block.areas) {
                block.areas.forEach((area) => {
                    area.on = newStatus
                    if (area.subBlocks) {
                        area.subBlocks.forEach((subBlock) => {
                            subBlock.on = newStatus
                        })
                    }
                })
            }

            uni.showToast({
                title: `${block.name}${this.getModeText()}系统${newStatus ? '已全开' : '已全关'}`,
                icon: 'none',
            })
        },

        // 切换区域状态
        async toggleAreaStatus(blockId, areaId) {
            const block = this.getBlockById(blockId)
            if (!block) return

            const area = block.areas.find((a) => a.id === areaId)
            if (!area) return

            const progressState = this.getProgressState(blockId, areaId, 'area')
            const newStatus = !area.on

            // 如果正在动画中且是关闭操作，允许关闭（大阀可在开启过程中关闭）
            if (progressState.isAnimating && newStatus) {
                try {
                    // 停止当前动画
                    this.setProgressState(blockId, areaId, false, false, 'area')
                    // 立即调用关闭接口
                    await this.controlValve(blockId, areaId, false, area.valveType, area.iemi, 0)
                    // 更新状态为关闭
                    area.on = false
                } catch (error) {
                    console.error('关闭阀门失败:', error)
                    uni.showToast({
                        title: '关闭阀门失败',
                        icon: 'none'
                    })
                }
                return
            }

            // 如果正在动画中且是开启操作，不允许重复开启
            if (progressState.isAnimating && newStatus) {
                return
            }

            // 如果是开启操作，显示百分比选择弹窗
            if (newStatus) {
                this.showPercentageDialog(blockId, areaId, 'area', area.name)
            } else {
                // 关闭操作直接执行
                await this.executeAreaStatusChange(blockId, areaId, newStatus, 0)
            }
        },

        // 切换区域展开状态
        toggleAreaExpand(blockId, areaId) {
            const block = this.getBlockById(blockId)
            if (!block) return

            const area = block.areas.find((a) => a.id === areaId)
            if (!area) return

            area.expanded = !area.expanded
        },

        // 切换子地块状态
        async toggleSubBlockStatus(blockId, subBlockId) {
            const block = this.getBlockById(blockId)
            if (!block) return

            // 检查是否正在动画中（小阀在动画过程中不允许操作）
            if (this.getProgressState(blockId, subBlockId, 'sub').isAnimating) {
                return
            }

            // 找到子地块所属的区域和子地块
            let targetArea = null
            let targetSubBlock = null

            for (const area of block.areas) {
                const subBlock = area.subBlocks?.find((item) => item.id === subBlockId)
                if (subBlock) {
                    targetArea = area
                    targetSubBlock = subBlock
                    break
                }
            }

            if (targetSubBlock && targetArea) {
                const newStatus = !targetSubBlock.on

                // 如果是开启操作，显示百分比选择弹窗
                if (newStatus) {
                    this.showPercentageDialog(blockId, subBlockId, 'sub', targetSubBlock.name)
                } else {
                    // 关闭操作直接执行
                    await this.executeSubBlockStatusChange(blockId, subBlockId, newStatus, 0)
                }
            }
        },

        // 更新区域状态
        updateAreaStatus(area) {
            if (!area.subBlocks || area.subBlocks.length === 0) return

            // const allOn = area.subBlocks.every((item) => item.on)
            // const allOff = area.subBlocks.every((item) => !item.on)

            // if (allOn) {
            //     area.on = true
            // } else if (allOff) {
            //     area.on = false
            // }
        },

        // 更新地块总状态
        updateBlockStatus(block) {
            if (!block.areas || block.areas.length === 0) return

            const allOn = block.areas.every((a) => a.on)
            const allOff = block.areas.every((a) => !a.on)

            if (allOn) {
                block.allOn = true
            } else if (allOff) {
                block.allOn = false
            }
        },

        // 显示确认对话框
        showConfirmDialog(blockId, type) {
            if (type === 'all') {
                const block = this.getBlockById(blockId)
                const newStatus = !block.allOn
                const statusText = newStatus ? '全开' : '全关'

                uni.showModal({
                    title: '操作确认',
                    content: `确定要将${
                        block.name
                    }的${this.getModeText()}状态切换为${statusText}吗？`,
                    success: (res) => {
                        if (res.confirm) {
                            this.toggleBlockStatus(blockId)
                        }
                    },
                })
            }
        },

        /**
         * 控制阀门开关
         * @param {string} blockId - 地块ID
         * @param {string} valveId - 阀门ID
         * @param {boolean} status - 开关状态
         * @param {string} valveType - 阀门类型 ('sub' 或 'main')
         * @param {string} iemi - 阀门设备编号
         * @param {number} percentage - 开启百分比 (0-100)
         */
        async controlValve(blockId, valveId, status, valveType, iemi, percentage = 0) {
            console.log('控制阀门开关')
            console.log(blockId)
            console.log(valveId)
            console.log(status)
            console.log(valveType)
            console.log(iemi)
            console.log(percentage)
            if (!iemi) {
                uni.showToast({
                    title: '设备iemi为空',
                    icon: 'none',
                })
                throw new Error('设备iemi为空')
                return
            }
            try {
                let response
                if (valveType === 'sub') {
                    // 准备请求参数
                    const params = {
                        iemNo: String(iemi), // 使用iemi作为iemNo
                        type: '1', // 小阀门都传1
                        thoroughfare: status ? '1' : '2', //通道 （1/2） 1：正转，2：反转
                        percentage: status ? percentage : 0 // 开启时使用选择的百分比，关闭时为0
                    }
                    // 调用小阀门开关接口
                    response = await valve.openSubValve(params)
                } else {
                    // 准备请求参数
                    const params = {
                        iemNo: String(iemi), // 使用iemi作为iemNo
                        type: status ? '1' : '0', // 1：开 0：关 大阀门的时  0 /1
                        percentage: status ? percentage : 0 // 开启时使用选择的百分比，关闭时为0
                    }
                    // 调用大阀门开关接口
                    response = await valve.openMainValve(params)
                }
                if (response.code === 0) {
                    return { code: 0, message: 'success' }
                } else {
                    throw new Error(response.data.message || '控制阀门失败')
                }
            } catch (error) {
                console.error('控制阀门失败:', error)
                throw error
            }
        },

        // 获取进度条状态
        getProgressState(blockId, itemId, type = 'area') {
            // 使用类型前缀区分总阀和子阀，避免ID冲突
            const key = `${blockId}-${type}-${itemId}`
            return this.progressStates[key] || { isAnimating: false, isOpening: true, duration: null }
        },

        // 设置进度条状态
        setProgressState(blockId, itemId, isAnimating, isOpening, type = 'area', duration = null) {
            // 使用类型前缀区分总阀和子阀，避免ID冲突
            const key = `${blockId}-${type}-${itemId}`
            this.progressStates[key] = { isAnimating, isOpening, duration }
        },

        // 进度条完成回调（只负责清理动画状态）
        onProgressComplete(blockId, itemId, type = 'area') {
            // 进度条动画完成，清理动画状态
            this.setProgressState(blockId, itemId, false, false, type)
        },

        // 根据阀门类型、状态和百分比获取动画时长
        getValveDuration(valveType, isOpening, percentage = 100) {
            let baseDuration = 0
            
            if (valveType === 'main') {
                // 大阀门：打开关闭 210S
                baseDuration = 210000
            } else if (valveType === 'sub') {
                // 小阀门：开关都是12秒
                baseDuration = 12000
            } else {
                // 默认2秒
                baseDuration = 2000
            }
            
            // 根据百分比调整动画时长
            return Math.round(baseDuration * (percentage / 100))
        },

        // 显示百分比选择弹窗
        showPercentageDialog(blockId, itemId, type, itemName) {
            console.log('显示百分比选择弹窗')
            console.log(type)
            const modeText = this.getModeText()
            const isArea = type === 'area'
            const options = isArea ? this.percentageOptions : this.subPercentageOptions
            
            this.percentageDialogTitle = `${itemName}${modeText}开启`
            this.currentPercentageOptions = [...options] // 使用展开运算符创建新数组
            this.defaultPercentage = isArea ? 100 : 100
            this.pendingPercentageAction = { blockId, itemId, type, itemName }
            this.percentageDialogVisible = true
        },

        // 处理百分比确认
        async handlePercentageConfirm(percentage) {
            const { blockId, itemId, type, itemName } = this.pendingPercentageAction
            
            if (type === 'area') {
                await this.executeAreaStatusChange(blockId, itemId, true, percentage)
            } else if (type === 'sub') {
                await this.executeSubBlockStatusChange(blockId, itemId, true, percentage)
            }
            
            this.percentageDialogVisible = false
            this.pendingPercentageAction = null
        },

        // 处理百分比取消
        handlePercentageCancel() {
            this.percentageDialogVisible = false
            this.pendingPercentageAction = null
        },

        // 执行区域状态变更
        async executeAreaStatusChange(blockId, areaId, newStatus, percentage = 0) {
            const block = this.getBlockById(blockId)
            if (!block) return

            const area = block.areas.find((a) => a.id === areaId)
            if (!area) return

            try {
                // 调用API控制阀门，传递阀门类型、iemi和百分比
                await this.controlValve(blockId, areaId, newStatus, area.valveType, area.iemi, percentage)

                // 根据阀门类型和百分比设置动画时长
                const duration = this.getValveDuration(area.valveType, newStatus, percentage)
                console.log('根据阀门类型和百分比设置动画时长')
                console.log(duration)
                
                // 启动进度条动画
                this.setProgressState(blockId, areaId, true, newStatus, 'area', duration)

                // 使用 setTimeout 处理状态更新（开启和关闭都使用相同逻辑）
                setTimeout(() => {
                    // 更新实际状态
                    this.setProgressState(blockId, areaId, false, false, 'area')
                    area.on = newStatus

                    // 更新地块总状态
                    this.updateBlockStatus(block)
                }, duration) // 根据动画时长更新状态
            } catch (error) {
                console.error('控制阀门失败:', error)
            }
        },

        // 执行子地块状态变更
        async executeSubBlockStatusChange(blockId, subBlockId, newStatus, percentage = 0) {
            const block = this.getBlockById(blockId)
            if (!block) return

            // 找到子地块所属的区域和子地块
            let targetArea = null
            let targetSubBlock = null

            for (const area of block.areas) {
                const subBlock = area.subBlocks?.find((item) => item.id === subBlockId)
                if (subBlock) {
                    targetArea = area
                    targetSubBlock = subBlock
                    break
                }
            }

            if (targetSubBlock && targetArea) {
                try {
                    // 调用API控制阀门，传递阀门类型、iemi和百分比
                    await this.controlValve(
                        blockId,
                        subBlockId,
                        newStatus,
                        targetSubBlock.valveType,
                        targetSubBlock.iemi,
                        percentage
                    )

                    // 根据阀门类型和百分比设置动画时长
                   
                    let duration = this.getValveDuration(targetSubBlock.valveType, newStatus, percentage)
                    duration = duration + 3000 // 如果是子闸门，再加3S
                    console.log('根据阀门类型和百分比设置动画时长')
                    console.log(duration)
                    // 启动进度条动画
                    this.setProgressState(blockId, subBlockId, true, newStatus, 'sub', duration)

                    // 使用 setTimeout 处理状态更新（开启和关闭都使用相同逻辑）
                    setTimeout(() => {
                        // 更新实际状态
                        this.setProgressState(blockId, subBlockId, false, false, 'sub')
                        targetSubBlock.on = newStatus

                        // 更新区域状态
                        this.updateAreaStatus(targetArea)
                        // 更新地块总状态
                        this.updateBlockStatus(block)
                    }, duration) // 根据动画时长更新状态
                } catch (error) {
                    console.error('控制阀门失败:', error)
                }
            }
        },

        // 获取区域按钮文本
        getAreaButtonText(blockId, areaId) {
            const progressState = this.getProgressState(blockId, areaId, 'area')
            const block = this.getBlockById(blockId)
            const area = block.areas?.find(a => a.id === areaId)
            
            if (!area) return '开启'
            
            // 如果正在动画中，显示关闭按钮（大阀可在开启过程中关闭）
            if (progressState.isAnimating) {
                return '关闭'
            }
            
            // 根据当前状态显示按钮文本
            return area.on ? '关闭' : '开启'
        },

        // 获取子地块按钮文本
        getSubBlockButtonText(blockId, subBlockId) {
            const progressState = this.getProgressState(blockId, subBlockId, 'sub')
            const block = this.getBlockById(blockId)
            let targetSubBlock = null

            // 找到子地块
            for (const area of block.areas || []) {
                const subBlock = area.subBlocks?.find((item) => item.id === subBlockId)
                if (subBlock) {
                    targetSubBlock = subBlock
                    break
                }
            }
            
            if (!targetSubBlock) return '开启'
            
            // 如果正在动画中，不允许操作（小阀需要全部开启后才能关闭）
            if (progressState.isAnimating) {
                return targetSubBlock.on ? '关闭' : '开启'
            }
            
            // 根据当前状态显示按钮文本
            return targetSubBlock.on ? '关闭' : '开启'
        },
    },
}
</script>

<style lang="scss" scoped>
.irrigation-container {
    padding: 20rpx;
    background-color: rgba(251, 252, 250, 1);
    min-height: 100vh;
}

.header {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    margin-bottom: 20rpx;
}

.icon-back {
    font-size: 40rpx;
    margin-right: 20rpx;
    color: #333;
}

.title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}

.tabs-container {
    display: flex;
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    padding: 8rpx;
    position: relative;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    position: relative;
}

.tab.active {
    background-color: transparent;

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40%;
        height: 4rpx;
        background-color: #2d6040;
        border-radius: 2rpx;
    }
}

.tab-text {
    font-size: 28rpx;
    color: #666;
}

.tab.active .tab-text {
    color: #2d6040;
}

.land-selector-container {
    padding: 32rpx;
    background-color: #fff;
    margin-bottom: 20rpx;

    .section-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 20rpx;
    }

    .land-grid {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10rpx;

        .land-item {
            width: calc(25% - 20rpx);
            margin: 10rpx;
            position: relative;
            border-radius: 8rpx;
            height: 132rpx;
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 24rpx;
            color: #333333;
            text-align: center;
            background: rgba(227, 227, 227, 0.35);

            image {
                width: 76rpx;
                height: 96rpx;
                margin-top: -20rpx;
                object-fit: cover;
            }

            text {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                text-align: center;
                padding: 8rpx 0;
            }

            &.active {
                background: rgba(45, 96, 64, 1);
                color: #ffffff;
            }

            .block-status {
                font-size: 20rpx;
                color: #999;
                bottom: -24rpx;

                &.running {
                    color: #2d6040;
                }
            }
        }
    }
}

.block-detail {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
}

.block-header {
    display: flex;
    justify-content: center;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #f0f0f0;
    margin-bottom: 20rpx;
}

.block-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.block-control {
    display: flex;
    align-items: center;
}

.control-label {
    font-size: 28rpx;
    color: #666;
    margin-right: 20rpx;
}

.mode-switch {
    margin: 20rpx 0 0 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-radius: 20rpx;
    padding: 4rpx;
}

.mode-option {
    width: 48%;
    padding: 26rpx 0;
    font-size: 28rpx;
    color: #666;
    border-radius: 4rpx;
    background-color: transparent;

    background-color: #e3e3e3;

    display: flex;
    justify-content: center;
}

.mode-option.active {
    background-color: #2d6040;
    color: #fff;
}

.area-list {
    margin-top: 20rpx;
}

.area-item {
    margin-bottom: 20rpx;
}

.area-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f8f8;
    border-radius: 8rpx;
    padding: 20rpx;
    margin-bottom: 10rpx;
}

.area-info {
    display: flex;
    align-items: center;
    flex: 1;
}

.expand-icon {
    font-size: 24rpx;
    color: #666;
    margin-right: 15rpx;
    transform: rotate(0deg);
    transition: transform 0.3s;
}

.expand-icon.expanded {
    transform: rotate(90deg);
}

.area-name {
    font-size: 28rpx;
    color: #333;
}

.area-control {
    display: flex;
    align-items: center;
}

.status-text {
    font-size: 24rpx;
    color: #666;
    margin-right: 15rpx;
}

.switch-container {
    position: relative;
    width: 80rpx;
    height: 44rpx;
    background-color: #ddd;
    border-radius: 22rpx;
    // margin: 0 15rpx;
    margin-right: 15px;
    transition: background-color 0.3s;
}

.switch-container.switch-on {
    background-color: #2d6040;
}

.switch-button {
    position: absolute;
    top: 4rpx;
    left: 4rpx;
    width: 36rpx;
    height: 36rpx;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.switch-on .switch-button {
    transform: translateX(36rpx);
}

.action-text {
    font-size: 24rpx;
    color: #2d6040;
}

.sub-blocks {
    margin-left: 40rpx;
    padding-left: 20rpx;
}

.sub-block-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rpx 20rpx;
    background-color: #fff;
    border-radius: 8rpx;
    margin-bottom: 10rpx;
    border: 2rpx solid #f0f0f0;
}

.sub-block-info {
    display: flex;
    align-items: center;
    flex: 1;
}

.status-indicator {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background-color: #ddd;
    margin-right: 15rpx;
}

.status-indicator.active {
    background-color: #2d6040;
}

.sub-block-name {
    font-size: 26rpx;
    color: #333;
}

.sub-block-control {
    display: flex;
    align-items: center;
}

.drainage-monitor {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
}

.monitor-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
}

.monitor-data {
    margin-bottom: 20rpx;
}

.data-item {
    background-color: #f8f8f8;
    border-radius: 8rpx;
    padding: 20rpx;
    margin-bottom: 15rpx;
}

.data-date {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 10rpx;
}

.data-info {
    display: flex;
    justify-content: space-between;
}

.data-row {
    display: flex;
    align-items: center;
}

.data-label {
    font-size: 26rpx;
    color: #666;
    margin-right: 10rpx;
}

.data-value {
    font-size: 26rpx;
    font-weight: bold;
    color: #333;
}

.data-value.warning {
    color: #ff4444;
}

.alert-message {
    display: flex;
    align-items: center;
    background-color: rgba(255, 68, 68, 0.1);
    border: 2rpx solid #ff4444;
    border-radius: 8rpx;
    padding: 20rpx;
}

.alert-icon {
    font-size: 32rpx;
    color: #ff4444;
    margin-right: 15rpx;
}

.alert-text {
    font-size: 26rpx;
    color: #ff4444;
    flex: 1;
}
</style>
